<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		
		 <div id="app">
			<!-- 分支结构 
			语法:1.v-if 如果为真,则展现标签;
			2.v-else if:必须和if连用
			3.2.v-else :必须和if连用 取反
			案例:要求:按照用户的考试成绩,评级-->
			<h3>评级</h3>
			请输入分数 <input type="number" v-model="score"/>
			<div v-if="score >= 90 ">优秀</div>
			<div v-else-if="score >= 80 ">良好</div>
			<div v-else-if="score >= 70 ">中等</div>
			<div v-else-if="score >= 60 ">及格</div>			
			<div v-else>不及格</div>
		 </div>
		 <!-- 1.导入js文件-->
		 <script src="../js/vue.js"> </script>
		 <!-- 3.创建vue对象-->
		 <script>
			
			const APP =new Vue({
				//1.注定区域
				el: "#app",
				data: {
					score:90
				}
			})
		 </script>
	</body>
</html>
